<template>
  <div id="topbar" :style="{ width: topWidth }">
    <div id="menu" :style="{background: theme.topbar}">
      <div class="left" style="display: flex">
        <i class="el-icon-s-fold" @click="visibleMenu" v-if="menuOpen && usersetting.showMenuButton"></i>
        <i class="el-icon-s-unfold" @click="visibleMenu" v-if="!menuOpen && usersetting.showMenuButton"></i>
        <Breadcrumb v-if="usersetting.showCrumbs"></Breadcrumb>
      </div>
      <div class="right">
        <!-- 基地选择 -->
        <div @click="choiceBase" v-if="isShowBaseChoiceInput">
          <el-input :placeholder="BaseInfo.name" prefix-icon="el-icon-s-home" suffix-icon="el-icon-caret-bottom">
          </el-input>
        </div>
        <!-- 屠宰场选择 -->
        <div @click="choiceSlaughter" v-if="isShowSlaughterChocieInput">
          <el-input :placeholder="SlaughterInfo.detailedAddress + '屠宰厂'" prefix-icon="el-icon-s-home" suffix-icon="el-icon-caret-bottom">
          </el-input>
        </div>
        <!-- 加工厂选择 -->
        <div @click="choiceProcess" v-if="isShowProcessChoiceInput">
          <el-input :placeholder="ProcessInfo.detailedAddress + '加工厂'" prefix-icon="el-icon-s-home" suffix-icon="el-icon-caret-bottom">
          </el-input>
        </div>
        <!-- 放大屏幕 -->
        <div class="screen" @click="fullScreen" v-if="!isFullScreen">
          <i class="el-icon-full-screen"></i>
        </div>
        <!-- 缩小屏幕 -->
        <div class="screen" @click="exitScreen" v-else>
          <i class="el-icon-remove-outline"></i>
        </div>
        <!-- 消息通知 -->
        <el-badge is-dot class="message">
          <el-button class="messageBtn" icon="el-icon-message-solid" @click="noticeDrawer=true"></el-button>
        </el-badge>
        <!-- 消息通知对话框 -->
        <el-drawer title="最新消息" size="27%" append-to-body :visible.sync="noticeDrawer" direction="rtl" :before-close="noticeClose">
          <!-- <el-empty v-if="dataList.length === 0" description="暂无新消息"></el-empty> -->
          <el-empty v-if="tempdataList.length === 0" description="暂无新消息"></el-empty>
          <div v-else>
            <el-badge v-for="(item, index) in tempdataList" :key="index" is-dot class="messList">
              <el-card>
                <span class="userName">{{item.userName}}</span><span class="messTime">{{item.gmtCreate}}</span>
                <div class="messInfo">{{item.content}}</div>
              </el-card>
            </el-badge>
          </div>
          <div class="drawerFooter">
            <el-button size="mini">全部设为已读</el-button>
          </div>
        </el-drawer>

        <div class="user">
          <el-dropdown>
            <!-- 头像 姓名 -->
            <div class="userstatus">
              <img class="cover" :src="UserInfo.profilePhoto" style="float: left" v-if="usersetting.showAvatar" />
              <span class="name">{{ UserInfo.username }}</span>
            </div>
            <!-- 下拉选项 -->
            <el-dropdown-menu>
              <el-dropdown-item>
                <i class="el-icon-user"></i>
                <span class="menu-txt" @click="gouser()">个人中心</span>
              </el-dropdown-item>
              <el-dropdown-item>
                <i class="el-icon-switch-button"></i>
                <span class="menu-txt" @click="loginout">退出登录</span>
              </el-dropdown-item>
              <el-dropdown-item>
                <i class="el-icon-lock"></i>
                <span class="menu-txt" @click="()=>{this.$emit('openDialog')}">所持权限</span>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div class="shezhi" @click="openSetting">
          <i class="el-icon-s-tools"></i>
        </div>
      </div>
    </div>
    <!-- 标签插槽 -->
    <slot></slot>
  </div>
</template>

<script>
import themesetting from '../../utils/setting'
import { fullScreen, exitScreen } from '../../utils/utils'
import { mapState } from 'vuex'
export default {
  name: 'TopBar',
  props: {
    menuOpen: Boolean,
  },
  computed: {
    topWidth() {
      return this.menuOpen ? `calc(100% - 250px)` : `calc(100% - 70px)`
    },

    ...mapState({
      usersetting: (state) => state.Usersetting.setting,
      UserInfo: (state) => state.User.UserInfo,

      BaseInfo: (state) => state.Usersetting.BaseInfo,
      isShowBaseChoiceInput: (state) => state.Switch.isShowBaseChoiceInput,

      SlaughterInfo: (state) => state.Usersetting.SlaughterInfo,
      isShowSlaughterChocieInput: (state) => state.Switch.isShowSlaughterChocieInput,

      ProcessInfo: (state) => state.Usersetting.ProcessInfo,
      isShowProcessChoiceInput: (state) => state.Switch.isShowProcessChoiceInput,
    }),
  },
  data() {
    return {
      // thememenucolor: '#5DADFF',
      // 是否全屏
      isFullScreen: false,
      theme: {}, // 导航主题
      // 个性设置弹出框
      drawer: false,
      // 用户信息
      // userInfo: {
      //   // 头像
      //   circleUrl:
      //     "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      //   // 姓名
      //   username: "未登录",
      // },
      authorityVisible: false,
      noticeDrawer: false,
      dataList: [],
      tempdataList: [
        {
          content:
            '智慧鸽子农业加工的工艺接口有更新哦，请留意该方面的信息。智慧鸽子农业加工的工艺接口有更新哦，请留意该方面的信息。智慧鸽子农业加工的工艺接口有更新哦，请留意该方面的信息',
          gmtCreate: '2022-03-30',
          id: 77,
          messageType: 1,
          status: 1,
          userId: 1111,
          userName: '小唐',
        },
        {
          content: '智慧鸽子农业加工的工艺接口有更新哦，请留意该方面的信息',
          gmtCreate: '2022-04-03',
          id: 77,
          messageType: 1,
          status: 1,
          userId: 1111,
          userName: '小亮',
        },
        {
          content: '智慧鸽子农业加工的工艺接口有更新哦，请留意该方面的信息',
          gmtCreate: '2022-04-04',
          id: 77,
          messageType: 1,
          status: 1,
          userId: 1111,
          userName: '亮哥',
        },
      ],
    }
  },
  watch: {
    'usersetting.theme': {
      handler() {
        this.getTheme()
      },
    },
  },
  created() {
    this.getTheme()
    // console.log(this);
  },
  mounted() {
    document.addEventListener('click', this.bodyCloseNotice)
    this.$socket.registerCallBack(this.wsCallBack())
    console.log('this.$socket', this.$socket)
  },
  beforeDestroy() {
    document.removeEventListener('click', this.bodyCloseNotice)
  },
  destroyed() {
    this.$socket.unRegisterCallBack(this.wsCallBack())
  },
  methods: {
    // ...mapMutations(['setBase']),
    // 选择基地
    choiceBase() {
      this.$store.commit('showBaseChoice')
    },

    // 选择屠宰厂
    choiceSlaughter() {
      this.$store.commit('showSlaughterChocie')
    },

    // 选择加工厂
    choiceProcess() {
      this.$store.commit('showProcessChoice')
    },
    // 全屏
    fullScreen() {
      fullScreen()
      this.isFullScreen = true
    },
    // 退出全屏
    exitScreen() {
      exitScreen()
      this.isFullScreen = false
    },
    // 左侧菜单展开|缩小
    visibleMenu() {
      this.$emit('click')
    },
    // 打开个性化设置
    openSetting() {
      this.$emit('personalityShow')
    },
    // 跳转到个人中心
    gouser() {
      this.$router.push('/User/PersonalCenter')
    },
    // 退出登录
    loginout() {
      this.$router.push('/login').then(() => {
        sessionStorage.clear()
        this.$message.info('您已退出登录')
      })
    },
    // 获取主题设置
    // 初始化用户设置 ||  获取最新设置
    getTheme() {
      let that = JSON.parse(localStorage.getItem('usersetting'))
      this.theme = that.theme
      let a = themesetting.themeList.filter((item) => {
        return item.theme === that.theme
      })
      this.theme = a[0]
      setTimeout(() => {
        switch (this.theme.menuLeftBc) {
          case '#191A23':
            document.getElementById('topbar').style.setProperty('--hover-color', '#66676A')
            break
          case '#ffffff':
            document.getElementById('topbar').style.setProperty('--hover-color', '#9ECEFF')
            break
          case '#087DF5':
            document.getElementById('topbar').style.setProperty('--hover-color', '#9ECEFF')
            break
        }
      }, 100)
    },
    // 确认关闭消息框
    noticeClose(done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          done()
        })
        .catch((_) => {})
    },
    wsCallBack(datalist) {
      if (datalist == undefined) {
        this.dataList = []
      } else {
        this.dataList = datalist
      }
      // console.log("this.dataList", this.dataList)
    },
    processMess(e) {
      console.log(e);
    }
  },
}
</script>

<style lang="scss" scoped>
#topbar {
  $menu-color: var(--theme-menu-color, #5dadff);
  $hover-color: var(--hover-color, #9eceff);
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1000;
  transition: all 0.3s ease-in-out;
  background: $default-background;
  background: transparent !important;

  #menu {
    height: 60px;
    line-height: 60px;
    // background: $theme-menu-color;
    color: #eee;
    box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;

    .left {
      line-height: 60px;

      i {
        display: inline-block;
        width: 50px;
        height: 60px;
        line-height: 60px;
        text-align: center;
        cursor: pointer;
        transition: all 0.2s;
        font-size: 16px;

        &:hover {
          background: $hover-color;
        }
      }

      .el-route {
        line-height: 60px;
        margin-left: 10px;
      }
    }

    .right {
      display: flex;

      .screen {
        cursor: pointer;
        padding: 0 15px;
        transition: background-color 0.3s;

        i {
          // color: #777;
          font-size: 20px;
        }

        &:hover {
          background: $hover-color;
        }
      }

      .notice {
        cursor: pointer;
        padding: 0 15px;
        transition: background-color 0.3s;
        position: relative;

        i {
          color: #777;
          font-size: 17px;
        }

        .count {
          display: block;
          width: 6px;
          height: 6px;
          background: red;
          border-radius: 50%;
          position: absolute;
          top: 20px;
          right: 15px;
        }

        &:hover {
          background: $hover-color;
          color: black;
        }
      }

      .messageBtn {
        padding: 0;
        height: 100%;
        width: 50px;
        font-size: 20px;
        background-color: transparent;
        color: white;
        border: 0;
        &:hover {
          background: $hover-color;
        }
      }

      .user {
        height: 60px;
        line-height: 60px;
        display: flex;
        padding: 0 10px;
        transition: background-color 0.3s;
        background: transparent;

        &:hover {
          background: $hover-color;
        }

        &:hover ul {
          height: 80px;
        }

        .cover {
          width: 30px;
          height: 30px;
          border-radius: 50%;
          background: #eee;
          margin: 15px 10px 0 0;
          overflow: hidden;
          cursor: pointer;
        }

        .name {
          font-size: 13px;
          cursor: pointer;
        }
      }

      .shezhi {
        width: 45px;
        height: 60px;
        line-height: 60px;
        text-align: center;
        cursor: pointer;
        transition: background-color 0.3s;

        i {
          font-size: 16px;
        }

        &:hover {
          background: $hover-color;
        }
      }

      .userstatus {
        color: white;
      }
    }
  }
}

.drawerFooter {
  position: absolute;
  bottom: 0;
  padding: 0 10px;
  width: 100%;
  height: 52px;
  line-height: 52px;
  border-top: 1px solid rgb(230, 230, 230);
}

.userName {
  padding-right: 10px;
  font-weight: 600;
  font-size: 14px;
}

.messList {
  width: 100%;
  cursor: pointer;
}

.messInfo {
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/deep/ .el-card {
  margin-bottom: -1px;
  box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 10%);
}

/deep/ .el-card__body {
  padding: 13px 15px 13px 15px;
}

/deep/ .el-badge__content.is-fixed.is-dot {
  top: 20px;
  right: 22px;
}

/deep/ .el-drawer__header {
  padding: 15px 10px 0 20px;
  font-size: 16px;
  font-weight: 700;
  color: black;
}

/deep/ .el-empty {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 200px;
}

/deep/ .el-empty__image {
  width: 70px;
}
</style>